
<template>
  <el-dialog
    :visible="lookshowmessage"
    style="margin-left: 180px"
    :before-close="lookhandclick"
    width="800px"
  >
    <div><h4>留言详情</h4></div>
    <div class="chat-container">
      <div class="chat-area">
        <!-- 左侧用户留言区域 -->
        <div class="user-message">
          <div class="user-avatar">
            <img src="../../../images/head.jpg" alt="User Avatar" />
          </div>
          <div class="user-message-content">
            <div class="user-info">
              <div class="user-name">{{ messages.contactName}}</div>
              <div class="message-time">{{ messages.gmtCreate | dateFormat }}</div>
            </div>
            <div class="message-content">{{ messages.messageSubject}}</div>
          </div>
        </div>
        <!-- 右侧工作人员回复区域 -->
        <div
          class="staff-message"
          v-for="message in staffMessages"
          :key="message.index"
        >
        <div class="rightbox">
          <div class="contentbox"><div class="message-contenttmwo">{{ message.leaveMessage }}</div></div>
          <div>
            <div class="staff-info">
            <div class="staff-name">{{ adminname }}</div>
            <div class="message-time">{{ message.gmtCreate | dateFormat}}</div>
          </div>
        </div>  
          </div>
          <div class="user-beavatar">
            <img src="../../../images/head.jpg" />
         </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
// 企业留言接口数据
import {getnested,getBoxMessage} from '@/api/nested'
export default {
  name: "ChatBox",
  data() {
    return {
      lookshowmessage: false,
      messages: [
      ],
      staffMessages: [
        // {
        //   id: 2,
        //   avatar: "https://picsum.photos/id/1/50/50",
        //   name: "客服",
        //   content: "Hello, how can I help you?",
        //   time: "2023/4/22 18:54:58",
        // },
      ],
      input: "",
      adminname:this.$store.state.user.userInfo.username
    };
  },
  methods: {
    lookhandclick() {
      this.input = ""
      this.lookshowmessage = false;
    },
    lookdemonstrate(id) {
      this.lookshowmessage = true;
      this.$parent.$parent.getapprovallist()
      getnested({id:id}).then(res=>{
        this.staffMessages = res.data.data
        console.log(this.staffMessages);
      })
      getBoxMessage({id:id}).then(res=>{
        this.messages = res.data.data
        console.log(this.messages);
      })
    },
  },
};
</script>
<style scoped>
.chat-container {
  display: flex;
  margin-left: 8px;
  flex-direction: column;
  height: 100%;
}
.chat-area {
  /* flex: 1; */
  width: 100%;
  height:100%;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
}
.user-message{
  display: flex;
  margin-bottom: 10px;
}
.staff-message {
  display: flex;
  justify-content: flex-end;
  /* justify-content: center; */
  margin-bottom: 10px;
  margin-top: 20px;
  /* margin-left: 270px; */
}
.user-avatar {
  margin-right: 10px;
}
.user-avatar img {
  border-radius: 50%;
}
.user-beavatar {
  margin-right: 10px;
}
.user-beavatar img {
  border-radius: 50%;
}
.user-info{
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.staff-info {
  display: flex;
  margin-right: 10px;

 justify-content: flex-end;
  margin-bottom: 5px;
}
.staff-name {
  font-weight: bold;
  margin-right: 5px;
}
.user-name{
  font-weight: bold;
  margin-right: 5px;
}
.message-content {
  background-color:#E3EFFD;
  padding: 10px;
  border-radius: 10px;
  max-width: 90%;
}
.message-contenttmwo{
  background-color: #f2f2f2;
  padding: 10px;
  border-radius: 10px;
  max-width: 90%;
  /* display: flex;
  justify-content: flex-end; */
}
.contentbox{
  display: flex;
  justify-content: flex-end;
  margin-top: 2px;
  margin-right: 8px;
}
.input-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}
.nthone{
  color: #fff;
  background-color:#4877E8;
}
.nthtwo{
  color:#fff;
  background-color: #515E81;
}
.halvingline {
  width: 100%;
  margin-top: 50px;
  border: 1px solid #999999;
}
.inputtxt {
  margin-right: 40px;
}
.user-message-content{
  display: flex;
  flex-direction: column;
}
.rightbox{
  display: flex;
  flex-direction: column-reverse;
}
</style>